<template>
  <div class="container">
    <el-main element-loading-text="loading..." style="min-height:60px;padding:0px;overflow:hidden">
      <el-row>
        <el-col>
          <date-range-picker
            v-model="datePicker1"
            class="w-240"
            size="small"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="timeChange"/>
          <el-button type="primary" icon="el-icon-search" size="small" @click="search('search')">搜索</el-button>
        </el-col>
      </el-row>
    </el-main>
    <!-- 表格 -->
    <el-table :loading="loading" :data="tableData" border highlight-current-row>
      <el-table-column align="center" fixed prop="date" label="时间"/>
      <el-table-column align="center" prop="name" label="推送内容"/>
      <el-table-column align="center" prop="province" label="点击用户量"/>
      <el-table-column align="center" label="点击率"/>
      <el-table-column align="center" prop="address" label="卸载App的用户量"/>
      <el-table-column align="center" prop="address" label="卸载率"/>
    </el-table>
  </div>
</template>
<script>
import { dateShortcutKeyJS } from '../mixins/common.js';
import timeUtils from '@/utils/timeHandle.js';
export default {
  mixins: [dateShortcutKeyJS],
  data() {
    return {
      loading: false,
      datePicker1: [
        timeUtils.timeHandle(new Date().getTime() - 3600 * 1000 * 24 * 6, 'date'),
        timeUtils.timeHandle(new Date().getTime(), 'date')
      ],
      separatedDays: null,
      onlyOneDay: false,
      listQuery: {
        startTime: timeUtils.timeHandle(new Date().getTime() - 3600 * 1000 * 24 * 6, 'date'),
        endTime: timeUtils.timeHandle(new Date().getTime(), 'date')
      },
      tableData: []
    };
  },
  mounted() {

  },
  methods: {
    /* 时间选择 */
    timeChange(time) {
      if (!time) return;
      const startTime = Date.parse(time[0]);
      const endTime = Date.parse(time[1]);
      const Days = Math.floor(Math.abs(endTime - startTime) / (24 * 3600 * 1000));
      this.separatedDays = Days;
      if (Days == 0) {
        this.listQuery.dateType = 0;
      } else if (Days <= 30 && Days > 0) {
        this.listQuery.dateType = 1;
      } else if (Days > 30 && Days <= 48) {
        this.listQuery.dateType = 2;
      } else if (Days > 48) {
        this.listQuery.dateType = 3;
      }
    },
    search() {
      if (!this.datePicker1) {
        this.$message.warning('请输入搜索时间', true);
        return;
      }
      if (this.separatedDays === 0) {
        this.onlyOneDay = true;
      } else {
        this.onlyOneDay = false;
      }

      this.listQuery.startTime = this.datePicker1[0];
      this.listQuery.endTime = this.datePicker1[1];
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  padding: 20px;
}

.chart {
  float: left;
  margin: 20px;
}
</style>
